Basic30天學會行動App-第8章.App處理輸入

16th鐵人賽處理輸入

因田木

2024-09-08 00:04:09

61 瀏覽

分享至

第8章: 處理App用戶輸入

在行動應用程式開發中，處理用戶輸入是關鍵的一環。無論是文字輸入、按鈕點擊，還是表單的驗證，這些都直接影響到應用程式的交互性和用戶體驗。這一章將探討如何在 B4X 平台上處理用戶輸入，並提供具體的範例程式來演示這些概念。

文字輸入與輸入框

文字輸入是許多應用程式中的基本功能之一，從簡單的搜尋框到複雜的表單，都需要處理用戶的文字輸入。在 B4A 中，EditText 是最常用的文字輸入框元件。

基本使用
在 B4A 中，你可以使用 EditText 來接受用戶的文字輸入。設置 EditText 是相對簡單的過程，可以直接在設計器中拖放，也可以透過程式碼進行配置。

Sub Process_Globals
    ' 全域變數
End Sub

Sub Globals
    ' 活動(Activity)變數
    Dim txtInput As EditText
    Dim lblOutput As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MainLayout")
    
    txtInput.Hint = "請輸入文字"
    txtInput.InputType = txtInput.INPUT_TYPE_TEXT
    
    lblOutput.Text = "輸入結果將顯示於此"
End Sub

Sub btnSubmit_Click
    Dim input As String = txtInput.Text
    lblOutput.Text = "你輸入的文字是: " & input
End Sub

上述範例中，EditText 元件用來接受用戶輸入的文字，並透過按鈕提交後顯示在 Label 中。Hint 屬性用來提示用戶該輸入框的用途，而 InputType 則用於指定輸入框的輸入類型，如普通文字、數字等。
2. 進階屬性
EditText 提供了多種進階屬性，允許開發者更細緻地控制輸入行為。例如：
• 輸入類型：你可以設置輸入框只接受特定類型的輸入，如數字、密碼等。

      txtInput.InputType = txtInput.INPUT_TYPE_NUMBER ' 只接受數字輸入
      ```
    • 字數限制：可以設置最大輸入字數，以避免用戶輸入過多文字。

  txtInput.MaxLength = 50 ' 限制最多輸入50個字元
  ```
• 自動完成：設置 AutoComplete 屬性，提供輸入建議以提升用戶體驗。

      txtInput.AutoComplete = True
      ```
## 按鈕與事件處理
按鈕是應用程式中最常見的交互元素之一。用戶透過點擊按鈕來觸發特定操作，如提交表單、進行計算或導航到另一個頁面。
1. 基本按鈕事件
在 B4A 中，處理按鈕點擊事件非常簡單。每個按鈕都有一個 Click 事件，你可以在這個事件中定義按鈕被點擊時的行為。

Sub btnSubmit_Click
Dim input As String = txtInput.Text
If input.Trim <> "" Then
lblOutput.Text = "你輸入的文字是: " & input
Else
lblOutput.Text = "輸入不可為空"
End If
End Sub

在這個範例中，按鈕點擊事件處理用戶輸入，並將結果顯示在 Label 中。如果用戶未輸入任何文字，則提示用戶輸入不可為空。
2. 多重按鈕事件
當一個介面中有多個按鈕時，你可以為每個按鈕設置不同的 Click 事件，或者使用單一事件處理多個按鈕的點擊。

Sub Button_Click
Dim btn As Button = Sender
Select Case btn.Tag
Case "Add"
lblOutput.Text = "你點擊了新增按鈕"
Case "Delete"
lblOutput.Text = "你點擊了刪除按鈕"
End Select
End Sub

在這個範例中，Tag 屬性用來區分不同的按鈕，並根據按鈕的標籤來執行不同的操作。
## 表單驗證
在處理用戶輸入時，表單驗證是確保資料正確性和完整性的重要環節。透過驗證，應用程式可以避免不正確或不完整的資料進入後端系統，從而減少潛在的錯誤和安全問題。
1. 基本表單驗證
最常見的表單驗證包括檢查必填欄位、輸入格式和資料範圍等。例如，在輸入電子郵件地址時，你可能需要檢查用戶是否輸入了有效的電子郵件格式。

Sub btnSubmit_Click
Dim email As String = txtEmail.Text
If email.Trim = "" Then
lblOutput.Text = "電子郵件不可為空"
Else If Not Regex.IsMatch("^[\w.-]+@[\w.-]+.\w{2,4}$", email) Then
lblOutput.Text = "請輸入有效的電子郵件地址"
Else
lblOutput.Text = "電子郵件已提交"
End If
End Sub

這段程式碼檢查用戶是否輸入了電子郵件地址，並確保輸入的地址符合基本的電子郵件格式。如果驗證失敗，系統會提示用戶重新輸入。
2. 進階表單驗證
對於更複雜的表單驗證，可能需要多個欄位的交叉驗證或伺服器端的驗證。例如，在註冊表單中，密碼和確認密碼欄位應該一致，這就是一個常見的交叉驗證。

Sub btnRegister_Click
Dim password As String = txtPassword.Text
Dim confirmPassword As String = txtConfirmPassword.Text

If password.Length < 6 Then
    lblOutput.Text = "密碼長度需至少6位"
Else If password <> confirmPassword Then
    lblOutput.Text = "兩次輸入的密碼不一致"
Else
    lblOutput.Text = "註冊成功"
End If

End Sub

這個範例展示了如何進行密碼和確認密碼的一致性驗證，確保用戶在註冊時輸入正確的資訊。
3. 即時驗證
即時驗證可以在用戶輸入的過程中即時給予反饋，而不需要等待用戶提交表單。這樣可以提高用戶體驗，減少錯誤的發生。

Sub txtPassword_TextChanged (Old As String, New As String)
If New.Length < 6 Then
lblPasswordHint.Text = "密碼過短"
lblPasswordHint.TextColor = Colors.Red
Else
lblPasswordHint.Text = "密碼強度足夠"
lblPasswordHint.TextColor = Colors.Green
End If
End Sub

這段程式碼在用戶輸入密碼時，即時檢查密碼的長度，並通過 Label 提供即時的反饋，提示用戶當前的密碼強度是否符合要求。
## 範例程式
以下是一個綜合了文字輸入、按鈕事件處理和簡單表單驗證的完整範例：

Sub Globals
Dim etInput As EditText
Dim btnSubmit As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Main")

etInput.Initialize("etInput")
etInput.Hint = "請輸入電子郵件"
Activity.AddView(etInput, 10dip, 10dip, 300dip, 50dip)

btnSubmit.Initialize("btnSubmit")
btnSubmit.Text = "提交"
Activity.AddView(btnSubmit, 10dip, 70dip, 100dip, 50dip)

End Sub

Sub btnSubmit_Click
Dim userInput As String
userInput = etInput.Text

If Not(IsValidEmail(userInput)) Then
    ToastMessageShow("請輸入有效的電子郵件地址！", False)
Else
    ToastMessageShow("電子郵件地址有效！", False)
End If

End Sub

Sub IsValidEmail(email As String) As Boolean
Dim Pattern As String = "^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$"
Dim Matcher As Matcher = Regex.Matcher(Pattern, email.ToUpperCase)
Return Matcher.Find
End Sub

在這個範例中，當用戶輸入一個電子郵件地址並點擊提交按鈕時，系統會驗證該地址的格式。如果格式正確，會顯示"電子郵件地址有效！"的訊息；否則，會提示用戶重新輸入。

## 結論
處理用戶輸入是開發任何行動應用程式時的重要環節。通過掌握文字輸入框、按鈕事件處理以及表單驗證等基礎技術，你將能夠構建更加互動和用戶友好的應用程式。在接下來的章節中，我們將繼續探討更多進階功能與資料處理技巧，進一步豐富你的開發技能。

參考網址
https://www.b4x.com/b4a.html